<template>
  <div class="vipsetlist">
    <div class="listHead">
      <div>序号</div>
      <div>类型</div>
      <div>奖品名称</div>
      <div>数量</div>
      <div>概率</div>
    </div>
    <div class="listContent">
      <div class="thanks">
        <div><el-checkbox v-model="isChooseThanks" @change="chooseThanks"></el-checkbox></div>
        <div>谢谢参与</div>
        <div>谢谢参与</div>
        <div>--</div>
        <div style="text-align: center">
          <el-input
            v-model="thanks"
            placeholder="中奖概率"
            style="width:60%;"
            type="number"
          ></el-input>
        </div>
      </div>
      <div>
        <Listitem v-for="index in giftNum" :key="index" :num="index" :vip="vip"/>
      </div>
      
    </div>
    
  </div>
</template>

<script>
import Listitem from './Listitem';
export default {
  props:['vip'],
  components:{
    Listitem
  },
  data() {
    return {
      thanks: "", //谢谢参与概率,
      giftNum:8,//默认没选中谢谢参与的商品数量
      isChooseThanks:false
    };
  },
  computed: {
    
  },
  methods: {
    chooseThanks(){
      this.giftNum=this.isChooseThanks?7:8;
    }
  },
};
</script>

<style scoped>
.listHead {
  display: grid;
  grid-template-columns: 8% repeat(4,23%);
  padding: 10px 0;
  place-items: center;
  background: #d1d1d1;
}
.listContent {
  border: 1px solid #cdcdcd;
  border-bottom: 0;
}
.thanks {
  display: grid;
  grid-template-columns: 8% repeat(4,23%);
  padding: 10px 0;
  place-items: center;
  border-bottom: 1px solid #cdcdcd;
}

.listContent /deep/ .el-input__inner {
  text-align: center;
}

</style>
